import { useState } from 'preact/hooks';

export default function LedControl() {
  const [led1State, setLed1State] = useState(false);
  const [led2State, setLed2State] = useState(false);

  const handleLedToggle = async (ledNumber) => {
    try {
      const response = await fetch('/api/led', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          number: ledNumber,
          state: ledNumber === 1 ? !led1State : !led2State 
        }),
      });

      if (response.ok) {
        if (ledNumber === 1) {
          setLed1State(!led1State);
        } else {
          setLed2State(!led2State);
        }
      }
    } catch (error) {
      console.error('LED控制失败:', error);
    }
  };

  return (
    <div class="h-full p-6">
      <div class="flex justify-between items-center mb-6">
        <h1 class="text-xl font-medium text-gray-800 flex items-center">
          <div class="w-1 h-5 bg-blue-500 mr-3"></div>
          LED 控制面板
        </h1>
      </div>
      
      <div class="flex justify-center space-x-8">
        {/* LED1控制 */}
        <div class="bg-white rounded-lg shadow-md p-8 w-64">
          <div class="flex flex-col items-center">
            <div class={`w-24 h-24 rounded-full flex items-center justify-center mb-6 ${led1State ? 'bg-red-400' : 'bg-gray-200'}`}>
              <svg class={`w-16 h-16 ${led1State ? 'text-red-600' : 'text-gray-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-700 mb-4">
              LED 1
            </h3>
            <button
              onClick={() => handleLedToggle(1)}
              class={`px-6 py-3 rounded-md text-lg transition-colors ${
                led1State
                  ? 'bg-red-500 hover:bg-red-600 text-white'
                  : 'bg-green-500 hover:bg-green-600 text-white'
              }`}
            >
              {led1State ? '关闭' : '开启'}
            </button>
          </div>
        </div>

        {/* LED2控制 */}
        <div class="bg-white rounded-lg shadow-md p-8 w-64">
          <div class="flex flex-col items-center">
            <div class={`w-24 h-24 rounded-full flex items-center justify-center mb-6 ${led2State ? 'bg-blue-400' : 'bg-gray-200'}`}>
              <svg class={`w-16 h-16 ${led2State ? 'text-blue-600' : 'text-gray-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-700 mb-4">
              LED 2 
            </h3>
            <button
              onClick={() => handleLedToggle(2)}
              class={`px-6 py-3 rounded-md text-lg transition-colors ${
                led2State
                  ? 'bg-red-500 hover:bg-red-600 text-white'
                  : 'bg-green-500 hover:bg-green-600 text-white'
              }`}
            >
              {led2State ? '关闭' : '开启'}
            </button>
          </div>
        </div>
      </div>

      <div class="mt-8 p-4 bg-blue-50 rounded-lg max-w-2xl mx-auto">
        <h2 class="text-lg font-semibold text-blue-800 mb-2">使用说明</h2>
        <ul class="list-disc list-inside text-blue-700 space-y-1">
          <li>点击"开启"或"关闭"按钮控制对应编号的LED</li>
          <li>开启时显示对应颜色，关闭时显示灰色</li>
        </ul>
      </div>
    </div>
  );
} 